//前期工作完成率
preliminaryWorkEchart();
function preliminaryWorkEchart() {
  let preliminaryWorkE = document.getElementsByClassName(
    "preliminaryWorkEchart"
  );
  for (var i = 0; i < preliminaryWorkE.length; i++) {
    let myChart = echarts.init(preliminaryWorkE[i]);
    option = {
      legend: {
        data: ["实际完成率", "计划完成率"],
        right: 10,
        top: 12,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0, 255, 233,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 255, 255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 233,0)",
                },
              ],
              global: false,
            },
          },
        },
      },
      grid: {
        top: "20%",
        left: "10%",
        right: "10%",
        bottom: "5%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: true,
            color: "#fff",
          },
          splitArea: {
            // show: true,
            color: "#f00",
            lineStyle: {
              color: "#f00",
            },
          },
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: ["10号线二期", "14号线", "15号线", "18号线一期"],
        },
      ],

      yAxis: [
        {
          type: "value",
          scale: true,
          // min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "实际完成率",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: "#00b3f4",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            formatter: "{c}%",
            position: "top",
            textStyle: {
              color: "#00b3f4",
            },
          },
          itemStyle: {
            color: "#00b3f4",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,179,244,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,179,244,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,179,244, 0.9)",
              shadowBlur: 20,
            },
          },
          data: ["93.06", "79.44", "78.06", "84.55"],
        },
        {
          name: "计划完成率",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: "#00ca95",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            formatter: "{c}%",
            position: "top",
            textStyle: {
              color: "#00ca95",
            },
          },

          itemStyle: {
            color: "#00ca95",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,202,149,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,202,149,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,202,149, 0.9)",
              shadowBlur: 20,
            },
          },
          data: ["93.06", "85.14", "82.15", "86.09"],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//合规率
passRateEchart();
function passRateEchart() {
  let linePassengerVC1 = document.getElementsByClassName("passRateEchart1");
  for (var i = 0; i < linePassengerVC1.length; i++) {
    let myChart = echarts.init(linePassengerVC1[i]);
    var fourPieData = [
      {
        name: "114%",
        value: 114,
      },
      {
        name: "100%",
        value: 100,
      },
      {
        name: "100%",
        value: 100,
      },
      {
        name: "100%",
        value: 100,
      },
    ];
    var seriesArr = [];
    fourPieData.forEach(function (item, index) {
      let maxScale = item.value > 100 ? Math.ceil(item.value / 10) * 10 : 100;
      seriesArr.push(
        {
          name: "刻度",
          type: "gauge",
          // center: ["50%", "65%"],
          center: [index * 25 + 13 + "%", "60%"],
          radius: "55%",
          min: 0, //最小刻度
          max: maxScale, //最大刻度
          splitNumber: 2, //刻度数量
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [[1, "rgba(0,0,0,0)"]],
            },
          }, //仪表盘轴线
          axisLabel: {
            show: true,
            color: "#0ab7ff",
            fontSize: 10,
            distance: -10,
            formatter: function (v) {
              return v + "%";
            },
          }, //刻度标签。
          axisTick: {
            show: true,
            splitNumber: 5,
            lineStyle: {
              color: "#0ab7ff",
              width: 1,
            },
            length: -3,
          }, //刻度样式
          splitLine: {
            show: true,
            length: -5,
            lineStyle: {
              color: "#0ab7ff",
            },
          }, //分隔线样式
        },
        {
          type: "gauge",
          radius: "50%",
          center: [index * 25 + 13 + "%", "60%"],
          // center: ["50%", "65%"],
          splitNumber: 0, //刻度数量
          min: 0, //最小刻度
          max: maxScale, //最大刻度
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 5,
              color: [
                [0.2, "#fa4e4b"],
                [0.4, "#f39c11"],
                [0.6, "#2b64fc"],
                [1, "#00a65a"],
              ],
            },
          },
          //分隔线样式。
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          pointer: {
            show: true,
            length: "80%",
            width: "5%",
          },
          title: {
            show: true,
            offsetCenter: [0, "60%"], // x, y，单位px
            textStyle: {
              fontWeight: "bold",
              color: "#0ab7ff",
              fontSize: 12,
            },
          },
          //仪表盘详情，用于显示数据。
          detail: {
            show: true,
            offsetCenter: [0, "30%"],
            color: "#ffffff",

            formatter: function (value) {
              if (value <= 20) {
                return;
              } else if (value <= 40) {
                return;
              } else if (value <= 60) {
                return;
              } else {
                return;
              }
            },
            textStyle: {
              fontSize: 12,
            },
          },
          data: [
            {
              name: item.name,
              value: item.value,
            },
          ],
        },
        {
          // 仅显示tooltip用
          type: "pie",
          radius: "90%",
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          z: 3,
          zlevel: 0,
          itemStyle: {
            borderWidth: 0,
          },
          data: [
            {
              value: 50,
              name: "",
              label: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        }
      );
    });
    option = {
      tooltip: {
        position: "inside",
        formatter:
          "小于20%有发展空间<br>20%~40%为健康<br>40%~60%为预警<br>大于60%为过度",
        textStyle: {
          fontSize: 10,
        },
      },
      series: seriesArr,
    };
    myChart.setOption(option);
  }

  let linePassengerVC = document.getElementsByClassName("passRateEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "2%",
        right: "4%",
        bottom: "20%",
        top: "4%",
        containLabel: true,
      },
      legend: {
        gridIndex: 0,
        data: ["施工许可证总数", "实际取证数", "施工工点数"],
        right: 10,
        bottom: 5,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        gridIndex: 0,
        type: "category",
        data: ["10号线二期", "14号线", "15号线", "18号线一期"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },
      yAxis: {
        gridIndex: 0,
        type: "value",
        max: "100",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        axisLabel: {},
      },
      series: [
        {
          name: "施工许可证总数",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#fccb05",
                },
                {
                  offset: 1,
                  color: "#f5804d",
                },
              ]),
              barBorderRadius: 12,
            },
          },
          data: [9, 72, 67, 46],
        },
        {
          name: "实际取证数",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#8bd46e",
                },
                {
                  offset: 1,
                  color: "#09bcb7",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: [8, 48, 42, 38],
        },
        {
          name: "施工工点数",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#248ff7",
                },
                {
                  offset: 1,
                  color: "#6851f1",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: [7, 48, 42, 38],
        },
      ],
    };
    myChart.setOption(option);
  }
}

//证照办理完成率
licenseProcessingEchart();
function licenseProcessingEchart() {
  let projectRiskE = document.getElementsByClassName("licenseProcessingEchart");

  let dataname = [
    "规划方案",
    "建设用地规划许可证",
    "供地批文",
    "用地批准书",
    "建设工程规划许可证",
    "施工许可证",
  ];
  let datamax = [100, 100, 100, 100, 100];
  let datavaule = [95, 96.2, 90.2, 11, 76.8, 69.6];

  let indicator = [];

  for (var i = 0; i < dataname.length; i++) {
    indicator.push({
      name: dataname[i],
      max: datamax[i],
    });
  }

  for (var i = 0; i < projectRiskE.length; i++) {
    let myChart = echarts.init(projectRiskE[i]);
    option = {
      tooltip: {
        show: true,
        trigger: "item",
      },
      radar: {
        center: ["50%", "50%"],
        radius: "55%",
        startAngle: 90,
        splitNumber: 4,
        shape: "circle",
        splitArea: {
          areaStyle: {
            color: ["transparent"],
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#fff", //
          },
        },
        name: {
          formatter: function (value, indicator) {
            return (
              value + "\n" + datavaule[dataname.indexOf(indicator.name)] + "%"
            );
          },
        },
        indicator: indicator,
      },
      series: [
        {
          type: "radar",
          symbol: "circle",
          symbolSize: 10,
          areaStyle: {
            normal: {
              color: "rgba(245, 166, 35, 0.4)",
            },
          },
          itemStyle: {
            color: "rgba(245, 166, 35, 1)",
            borderColor: "rgba(245, 166, 35, 0.3)",
            borderWidth: 10,
          },
          lineStyle: {
            normal: {
              type: "dashed",

              color: "rgba(245, 166, 35, 1)",
              width: 2,
            },
          },
          data: [datavaule],
        },
      ],
    };
    myChart.setOption(option);
  }
}

// 动迁完成率
relocationCompletionEchart();
function relocationCompletionEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "relocationCompletionEchart"
  );

  let name = [
    "10号线二期动迁数",
    "14号线动迁数",
    "15号线动迁数",
    "18号线一期动迁数",
    "动迁数(户/家)总量",
  ];
  let completeValue = [122, 2662, 657, 722, 4163];
  let completePercent = [100, 100, 100, 100, 100];

  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {},
      animationDurationUpdate: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 600,
            edgeLength: 200,
          },
          roam: true,
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: function (value, indicator) {
                return (
                  value.name +
                  "\n" +
                  "完成量：" +
                  completeValue[name.indexOf(value.name)] +
                  "\n" +
                  "完成率：" +
                  completePercent[name.indexOf(value.name)] +
                  "%"
                );
              },
              fontSize: 12,
              fontStyle: "600",
            },
          },
          data: [
            {
              name: "10号线二期动迁数",
              value: 10000,
              x: 500,
              y: 56,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FF8C00",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FF8C00",
                  color: "#FF8C00",
                },
              },
            },
            {
              name: "18号线一期动迁数",
              value: 6181,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FF4500",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FF4500",
                  color: "#FF4500",
                },
              },
            },
            {
              name: "动迁数(户/家)总量",
              value: 4055,
              symbolSize: 80,
              x: 0,
              y: 0,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#4DFB37",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#4DFB37",
                  color: "#4DFB37",
                },
              },
            },
            {
              name: "14号线动迁数",
              value: 2467,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#00BFFF",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#00BFFF",
                  color: "#00BFFF",
                },
              },
            },
            {
              name: "15号线动迁数",
              value: 2244,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FFD700",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FFD700",
                  color: "#FFD700",
                },
              },
            },
          ],
          links: [
            {
              source: "15号线动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "18号线一期动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "10号线二期动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "14号线动迁数",
              target: "动迁数(户/家)总量",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//交地完成率
landDeliveryEchart();
function landDeliveryEchart() {
  let linePassengerVC = document.getElementsByClassName("landDeliveryEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var value = 1;
    var data = [value, value, value];
    var option = {
      title: [
        {
          text: (value * 100).toFixed(0) + "%",
          left: "28%",
          top: "18%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#61033f",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n10号线二期",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
        {
          text: (value * 100).toFixed(0) + "%",
          left: "68%",
          top: "18%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#295008",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n14号线",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
        {
          text: (value * 100).toFixed(0) + "%",
          left: "28%",
          top: "66%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#a06a0a",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n15号线",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
        {
          text: (value * 100).toFixed(0) + "%",
          left: "68%",
          top: "66%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#02456d",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n18号线一期",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
      ],
      series: [
        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["30%", "22%"],
          amplitude: 5,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(169, 14, 115, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(205, 17, 141, .5)",
              },
              {
                offset: 0,
                color: "rgba(205, 17, 141, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            fontSize: 16,
            formatter: "",
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 0.3,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },

        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["70%", "22%"],
          amplitude: 20,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(74, 134, 21, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(119, 185, 63, .5)",
              },
              {
                offset: 0,
                color: "rgba(119, 185, 63, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            normal: {
              formatter: "",
            },
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 1,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },

        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["30%", "70%"],
          // color: ['#f8eeb0', '#fddc75', '#fbad17'],
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(189, 126, 12, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(251, 173, 23, .5)",
              },
              {
                offset: 0,
                color: "rgba(251, 173, 23, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            normal: {
              formatter: "",
            },
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 1,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },

        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["70%", "70%"],
          amplitude: 5,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(0, 108, 154, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(0, 155, 219, .5)",
              },
              {
                offset: 0,
                color: "rgba(0, 155, 219, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            normal: {
              formatter: "",
            },
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 1,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//装饰安装进场率;
decorationInstallationEchart();
function decorationInstallationEchart() {
  let decorationInstallationE = document.getElementsByClassName(
    "decorationInstallationEchart"
  );
  for (var i = 0; i < decorationInstallationE.length; i++) {
    let myChart = echarts.init(decorationInstallationE[i]);
    var fourPieData = [
      {
        title: "10号线二期",
        value: 100,
      },
      {
        title: "14号线",
        value: 32.26,
      },
      {
        title: "15号线",
        value: 100,
      },
      {
        title: "18号线一期",
        value: 100,
      },
    ];
    var titleArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: `${item.title}\n${item.value}%`,
        left: index < 2 ? index * 50 + 24 + "%" : index * 50 - 76 + "%",
        top: index < 2 ? "20%" : "68%",
        textAlign: "center",
        textStyle: {
          fontSize: 12,
          color: "#ffffff",
        },
      });
      seriesArr.push(
        {
          type: "gauge",
          radius: "35%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "73%",
          ],
          clockwise: false,
          startAngle: "-80",
          endAngle: "-439.9999",
          splitNumber: 25,
          detail: {
            offsetCenter: [0, -20],
            formatter: " ",
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, "#2CFAFC"],
                [1 / 100, "#00FFFF"],
                [1, "#0E192D"],
              ],
              width: 10,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "#0E192D",
              width: 6,
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          name: "最内层虚线圈",
          type: "pie",
          radius: ["23%", "24%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "73%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "red",
            },
          },
          label: {
            show: false,
          },
          data: setdata(),
        },
        {
          type: "pie",
          name: "内层细圆环",
          radius: ["27%", "27.5%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "73%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#00FFFF",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          type: "pie",
          name: "外层细圆环",
          radius: ["37%", "38%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "73%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#00FFFF",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          name: "大环",
          type: "gauge",
          splitNumber: 35,
          radius: "45%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "73%",
          ],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
            lineStyle: {
              color: [[1, "#00FFFF"]],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 5,
            lineStyle: {
              color: "auto",
              width: 1.5,
            },
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        }
      );
    });
    function setdata() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 10,
            itemStyle: {
              normal: {
                color: "rgb(0,255,255,.3)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgb(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,255,255,1)",
              },
            },
          });
        }
      }
      return dataArr;
    }
    // function startTimer() {
    //   timer = setInterval(() => {
    //     let option = myChart.getOption();
    //     option.series[1].startAngle = option.series[1].startAngle - 1;
    //     myChart.setOption(option);
    //   }, 100);
    // }
    // setTimeout(startTimer, 0);
    option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}

//土建工程形象进度控制
civilEngineeringEchart();
function civilEngineeringEchart() {
  let civilEngineeringE = document.getElementsByClassName(
    "civilEngineeringEchart"
  );
  for (var i = 0; i < civilEngineeringE.length; i++) {
    let myChart = echarts.init(civilEngineeringE[i]);
    var dataname = ["车站", "盾构区间", "旁通道", "轨道", "土建附属"];
    var datamax = [100, 100, 100, 100, 100];
    var datavaule = [96.77, 98.69, 89.83, 79.66, 50.4];

    var datavaule2 = [100, 100, 100, 100, 100];

    var indicator = [];
    for (var i = 0; i < dataname.length; i++) {
      indicator.push({
        name: dataname[i],
        max: datamax[i],
      });
    }

    option = {
      tooltip: {
        show: false,
        trigger: "item",
      },
      legend: {
        data: ["当前分数", "满分"],
        type: "scroll",
        orient: "vertical",
        icon: "roundRect",
        right: "20",
        top: "center",
        itemGap: 30,
        itemWidth: 16,
        itemHeight: 16,
        textStyle: {
          fontSize: "15",
          color: "#656565",
        },
      },
      radar: {
        center: ["50%", "50%"],
        radius: "65%",
        startAngle: 90,
        splitNumber: 5,
        splitArea: {
          areaStyle: {
            color: ["#FFFFFF", "#F5F9FF"].reverse(),
          },
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#D2E4F8",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#D2E4F8",
          },
        },
        name: {
          formatter: function (value, indicator) {
            return (
              value + "\n" + datavaule[dataname.indexOf(indicator.name)] + "%"
            );
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        indicator: indicator,
      },

      series: [
        {
          // name: "当前分数",
          type: "radar",
          symbol: "none",
          symbolSize: 6,
          areaStyle: {
            normal: {
              color: "#80B2FF",
            },
          },
          itemStyle: {
            color: "#80B2FF",
          },
          lineStyle: {
            normal: {
              color: "#80B2FF",
              width: 2,
            },
          },
          data: [datavaule],
        },
        {
          //name: "满分",
          type: "radar",
          symbol: "none",
          symbolSize: 6,
          /*areaStyle: {
                normal: {
                    color: 'rgba(234, 164, 61, 0.18)',
                }
            },*/
          itemStyle: {
            color: "#0263FF",
          },
          lineStyle: {
            normal: {
              color: "#0263FF",
              width: 2,
            },
          },
          data: [datavaule2],
        },
      ],
    };
    myChart.setOption(option);
  }
}
// 机电工程形象进度
electromechanicalEChart();
function electromechanicalEChart() {
  let civilEngineeringE = document.getElementsByClassName(
    "electromechanicalEChart"
  );

  var abscissaData = [
    "车辆",
    "供电",
    "通信",
    "信号",
    "屏蔽门",
    "综合监控",
    "电梯",
    "扶梯",
  ];
  var value = [52.12, 65.52, 60.82, 56.9, 47.31, 43.01, 61.24, 42.31];
  var residueValue = [];

  var ellipseList = [];

  value.forEach((item, index) => {
    var xDeviation = 42.8 * index;
    residueValue.push(100 - item);
    ellipseList
      .push
      // {
      //   name: "中间立体圆",
      //   type: "pictorialBar",
      //   symbolSize: [25, 10],
      //   symbolOffset: [xDeviation, -5],
      //   z: 12,
      //   itemStyle: {
      //     normal: {
      //       color: "#2B5B4D",
      //     },
      //   },
      //   data: [
      //     {
      //       value: item,
      //       symbolPosition: "end",
      //     },
      //   ],
      // },
      // {
      //   name: "最底部立体圆",
      //   type: "pictorialBar",
      //   symbolSize: [25, 10],
      //   symbolOffset: [xDeviation, 5],
      //   z: 12,
      //   itemStyle: {
      //     normal: {
      //       color: "#01CC04",
      //     },
      //   },
      //   data: [100 - item],
      // }
      ();
  });

  ellipseList.push({
    //底部立体柱
    stack: "1",
    type: "bar",
    itemStyle: {
      normal: {
        color: "#01CC04",
        opacity: 0.7,
      },
    },
    // label: {
    //     show: true,
    //     position: "top",
    //     distance: 15,
    //     color: "#FFFE00",
    //     fontSize:10,
    //     formatter:'{c}'+'%',
    //     rotate: 45
    // },
    silent: true,
    barWidth: 25,
    barGap: "-100%", // Make series be overlap
    data: value,
  });

  for (var i = 0; i < civilEngineeringE.length; i++) {
    let myChart = echarts.init(civilEngineeringE[i]);

    option = {
      tooltip: {
        // trigger: "none",
      },
      grid: {
        top: "10%",
        left: "12%",
        bottom: "15%",
        right: "5%",
      },
      xAxis: {
        show: true,
        data: abscissaData,
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFFFF",
          },
          interval: 0,
          rotate: 45,
          margin: 20,
          align: "center",
        },
      },
      yAxis: {
        show: true,
        max: 100,
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
          },
          formatter: "{value}%",
        },
      },
      series: ellipseList,
    };

    myChart.setOption(option);
  }
}
// 装饰安装执行率;
decorationInstallationImplementEchart();
function decorationInstallationImplementEchart() {
  let decorationInstallationIE = document.getElementsByClassName(
    "decorationInstallationImplementEchart"
  );
  for (var i = 0; i < decorationInstallationIE.length; i++) {
    let myChart = echarts.init(decorationInstallationIE[i]);

    var fourPieData = [
      {
        name: "10号线二期",
        value: 100,
      },
      {
        name: "14号线",
        value: 32.26,
      },
      {
        name: "15号线",
        value: 100,
      },
      {
        name: "18号线一期",
        value: 100,
      },
    ];
    var seriesArr = [];
    var axisTickLength = 10; //刻度线宽度
    fourPieData.forEach(function (item, index) {
      // var value = 30;
      var colorRegionRate = (item.value / 100).toFixed(2);

      var indexx = item.value >= 80 ? 0 : item.value > 30 ? 1 : 2;
      var startColor = ["#34da62", "#fed95f", "#f56c6c"][indexx];
      var endColor = ["#14a661", "#ff8e02", "#f44444"][indexx];
      seriesArr.push(
        {
          type: "gauge",
          name: "外层半透明边框圈",
          radius: "50%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "28%" : "75%",
          ],
          startAngle: "225",
          endAngle: "-45",
          splitNumber: "100",
          pointer: {
            show: false,
          },
          detail: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [[1, "rgba(255,255,255,0.1)"]],
              width: 8,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "gauge",
          name: "第二层",
          radius: "42%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "28%" : "75%",
          ],
          startAngle: "225",
          endAngle: "-45",
          splitNumber: 4,
          pointer: {
            show: true,
            length: "53%",
          },
          // 仪表盘指针样式。
          itemStyle: {
            color: "#f6fefe",
          },
          data: [
            {
              value: item.value,
              name: "执行率",
            },
          ],
          title: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                // 有数值的部分
                [
                  colorRegionRate,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: startColor, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: endColor, // 100% 处的颜色
                    },
                  ]),
                ],
                // 底色
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0.1)", // 100% 处的颜色
                    },
                  ]),
                ],
              ],
              width: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          detail: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          animationDuration: 2000,
        },
        {
          name: "第三层渐变圈",
          type: "gauge",
          radius: "35%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "28%" : "75%",
          ],
          startAngle: "225",
          endAngle: "-45",
          splitNumber: 4,
          pointer: {
            show: false,
          },
          data: [
            {
              value: item.value,
              name: item.name,
            },
          ],

          axisLine: {
            show: true,
            lineStyle: {
              color: [
                // 有数值的部分
                [
                  colorRegionRate,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: startColor, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: endColor, // 100% 处的颜色
                    },
                  ]),
                ],
                // 底色
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0.1)", // 100% 处的颜色
                    },
                  ]),
                ],
              ],
              width: axisTickLength, // 刻度线宽度
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          // 仪表盘指针样式。
          itemStyle: {
            color: "#f6fefe",
          },
          title: {
            show: false,
          },
          detail: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          animationDuration: 2000,
        },
        {
          name: "与div背景色相同模拟axisTick",
          type: "gauge",
          radius: "35%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "28%" : "75%",
          ],
          startAngle: "225",
          endAngle: "-45",
          splitNumber: 1,
          pointer: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            show: true,
            offsetCenter: [0, "80%"],
            textStyle: {
              fontSize: 16,
              color: "#fff",
            },
            formatter: [
              "{value} " + (item.unit || ""),
              "{name|" + item.name + "}",
            ].join("\n"),
            rich: {
              a: {
                color: "#DFE3F5",
                fontWeight: 600,
                fontSize: 12,
              },
              b: {
                color: "#DFE3F5",
                fontWeight: 600,
                fontSize: 12,
              },
              c: {
                color: "#DFE3F5",
                fontWeight: 600,
                fontSize: 12,
              },
            },
          },
          // detail: {
          //   show: true,
          //   offsetCenter: [0, "80%"],
          //   formatter: (params) => {
          //     debugger;
          //     return [
          //       `{a|${params.value}}{b|%}`,
          //       `{c|name${
          //         params.value >= 80 ? "较高" : value > 20 ? "正常" : "较低"
          //       }}`,
          //     ].join("\n");
          //   },
          //   rich: {
          //     a: {
          //       color: "#DFE3F5",
          //       fontWeight: 600,
          //       fontSize: 12,
          //     },
          //     b: {
          //       color: "#DFE3F5",
          //       fontWeight: 600,
          //       fontSize: 12,
          //     },
          //     c: {
          //       color: "#DFE3F5",
          //       fontWeight: 600,
          //       fontSize: 12,
          //     },
          //   },
          // },
          data: [
            {
              value: item.value,
              name: item.name,
            },
          ],
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              opacity: 0,
            },
          },
          axisTick: {
            show: true,
            splitNumber: 40,
            length: axisTickLength, // 刻度线宽度
            lineStyle: {
              // 与div背景色相同
              color: "#353c60",
              width: 5,
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        }
      );
    });
    option = {
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}

//里程碑节点完成率
milepostPointEchart();
function milepostPointEchart() {
  let civilEngineeringE = document.getElementsByClassName(
    "milepostPointEchart"
  );

  for (var i = 0; i < civilEngineeringE.length; i++) {
    let myChart = echarts.init(civilEngineeringE[i]);
    option = {
      textStyle: {
        color: "#b3babe",
      },
      legend: {
        type: "plain",
        top:'5%',
        right: "5%",
        textStyle: {
          fontSize: 12,
        },
        data: [
          {
            name: "土建工程里程碑节点完成率",
            textStyle: {
              color: "#e2ab2b",
            },
          },
          {
            name: "机电工程里程碑节点完成率",
            textStyle: {
              color: "#03dda3",
            },
          },
        ],
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          axis: "x",
        },
        padding: [10, 10],
        extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
      },
      grid: {
        top: "15%",
        left: "5%",
        right: "5%",
      },
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#85d7f9",
        },
        data: ["10号线二期", "14号线", "15号线", "18号线一期"],
      },
      yAxis: {
        nameTextStyle: {
          color: "#3dcaff",
        },
        axisLine: true,
        axisLabel: {
          margin: -15,
          color: "#3dcaff",
          formatter: "{value}%",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#123144",
          },
        },
      },
      series: [
        {
          name: "土建工程里程碑节点完成率",
          data: [0, 0, 100, 66.67],
          type: "line",
          smooth: true,
          showAllSymbol: true,
          label: {
            show: true,
            position: "bottom",
            textStyle: {
              color: "#00ca95",
            },
            formatter: function (value) {
              return value.value == 0 ? "" : value.value + "%";
            },
          },
          itemStyle: {
            normal: {
              color: "#3A84FF",
              lineStyle: {
                color: "#e2ab2b",
                width: 1,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 0, 0, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#21da94", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
        },
        {
          name: "机电工程里程碑节点完成率",
          data: [40, 100, 84.21, 33.33],
          type: "line",
          showAllSymbol: true,
          smooth: true,
          label: {
            show: true,
            position: "bottom",
            textStyle: {
              color: "#00ca95",
            },
            formatter: function (value) {
              return value.value == 0 ? "" : value.value + "%";
            },
          },
          itemStyle: {
            normal: {
              color: "#3A84FF",
              lineStyle: {
                color: "#3A84FF",
                width: 1,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 0, 0, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1fb5fc", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  }
}

//计划节点完成率
plantPointEchart();
function plantPointEchart() {
  let plantPointE = document.getElementsByClassName("plantPointEchart");

  const radius = 0.8;
  const dataSet = [
    ["10号线二期", "14号线", "15号线", "18号线一期"],
    [100, 55.39, 82.52, 42.39],
    [94.12, 61.11, 75.76, 49.11],
  ];
  const theta = (Math.PI * 2) / dataSet[2].length;

  const createSvg = ({ width, height, shadowColor, shadowBlur, points }) => {
    const ret = [`M${points[0][0]} ${points[0][1]}`];
    for (let i = 1; i < points.length; i++) {
      ret.push(`L${points[i][0]} ${points[i][1]}`);
    }
    ret.push("Z");
    const rectPath = ret.join(" ");
    return `
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
            x="0px" y="0px" 
            width="${width}"
            height="${height}"
        >
            <style>
                .st1 {
                    fill: transparent;
                    stroke: ${shadowColor};
                    stroke-width: ${shadowBlur}px;
                    filter: url(#chart-inset-shadow);
                    clip-path: url(#chart-clip);
                }

            </style>
            <defs>
              
                <clipPath id="chart-clip">
                    <path d="${rectPath}" />
                </clipPath>
                
                <filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%">
            		<feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${
                  shadowBlur * 0.75
                }" />
            		<feMerge>
            			<feMergeNode in="gass" />
            		</feMerge>
            	</filter>

            </defs>
            <g>
                <path class="st1" d="${rectPath}" />
            </g>
        </svg>
    `;
  };

  const cretateSvgUrl = (svgOption) => {
    const svgString = createSvg(svgOption);
    const svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });

    const DOMURL = window.URL || window.webkitURL || window;
    const insetShadowUrl = DOMURL.createObjectURL(svg);

    return insetShadowUrl;
  };

  const getPoints = (R, ps, max) =>
    ps.map((v, i) => {
      const t = i * theta;
      const d = v / max;
      const x = R - Math.sin(t) * R * d;
      const y = R - Math.cos(t) * R * d;
      return [x, y];
    });

  const maxValue = [...dataSet[1], ...dataSet[2]].reduce(
    (m, v) => Math.max(m, v),
    -Infinity
  );

  for (var i = 0; i < plantPointE.length; i++) {
    let myChart = echarts.init(plantPointE[i]);

    option = {
      legend: {
        show: true,
        orient: "vertical",
        type: "plain",
        textStyle: {
          fontSize: 12,
        },
        right: "5%",
        top:'5%',
        data: [
          {
            name: "土建工程计划节点完成率",
            textStyle: {
              color: "#e2ab2b",
            },
          },
          {
            name: "机电工程计划节点完成率",
            textStyle: {
              color: "#03dda3",
            },
          },
        ],
      },
      grid: {
        top: 30,
      },
      polar: {
        radius: radius * 10 + "%",
        center: ["50%", "50%"],
      },
      angleAxis: {
        type: "category",
        clockwise: false,
        boundaryGap: false,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      radiusAxis: {
        type: "value",
        max: 100,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      radar: {
        // indicator: dataSet[0].map((v, i) => ({name: v, max: maxValue})),
        indicator: [
          {
            name: "10号线二期",
            max: 100,
          },
          {
            name: "14号线",
            max: 65,
          },
          {
            name: "15号线",
            max: 100,
          },
          {
            name: "18号线一期",
            max: 50,
          },
        ],
        radius: 90,
        center: ["50%", "50%"],
        shape: "polygon",
        splitNumber: 4,
        name: {
          textStyle: {
            color: "#ffffff",
          },
          formatter: function (value, indicator) {
            return (
              value +
              "\n" +
              "土建：" +
              dataSet[1][dataSet[0].indexOf(value)] +
              "%" +
              "\n" +
              "机电：" +
              dataSet[2][dataSet[0].indexOf(value)] +
              "%"
            );
          },
        },
        splitArea: {
          areaStyle: {
            color: [
              "rgba(255,255,255,0.1)",
              "rgba(255,255,255,0.03)",
              "rgba(255,255,255,0.1)",
              "rgba(255,255,255,0.03)",
            ],
          },
        },
        splitLine: {
          lineStyle: {
            color: [
              "#6b6b6b",
              "#6b6b6b",
              "#6b6b6b",
              "#6b6b6b",
              "#6b6b6b",
              "#6b6b6b",
            ].reverse(),
            width: 3,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(238,238,238, 0.2)",
          },
        },
      },

      series: [
        {
          name: "土建工程计划节点完成率",
          type: "radar",
          tooltip: {
            trigger: "item",
          },
          data: [{ value: dataSet[1] }],
          symbol: "circle",
          symbolSize: 12,
          itemStyle: {
            normal: {
              color: "#e2ab2b",
            },
          },
          areaStyle: {
            normal: {
              color: "transparent",
            },
          },
          lineStyle: {
            normal: {
              color: "#e2ab2b",
              width: 5,
            },
          },
        },
        {
          name: "机电工程计划节点完成率",
          type: "radar",
          tooltip: {
            trigger: "item",
          },
          data: [{ value: dataSet[2] }],
          symbol: "circle",
          symbolSize: 12,
          itemStyle: {
            normal: {
              color: "#03dda3",
            },
          },
          areaStyle: {
            normal: {
              color: "transparent",
            },
          },
          lineStyle: {
            normal: {
              color: "#03dda3",
              width: 5,
            },
          },
          z: 3,
        },
      ],
    };
    myChart.setOption(option);
  }
}
//关键节点完成率
importantPointEchart();
function importantPointEchart() {
  let importantPointEchartE = document.getElementsByClassName(
    "importantPointEchart"
  );

  dataText = [
    {
      name: "土建工程关键节点完成率",
      type: "line",
      smooth: true,
      symbolSize: 8,
      data: [0, 14.29, 95.54, 23.33],
      barWidth: "30%",
      itemStyle: {
        normal: {
          color: "#f0c725",
        },
      },
    },
    {
      name: "机电工程关键节点完成率",
      type: "line",
      smooth: true,
      symbolSize: 8,
      data: [100, 14.29, 87.14, 81.63],
      barWidth: "30%",
      itemStyle: {
        normal: {
          color: "#16f892",
        },
      },
    },
  ];
  dataObj = {
    year: ["10号线二期", "14号线", "15号线", "18号线一期"],
    data: {
      value: [
        {
          name: "土建工程关键节点完成率",
          value: [0, 14.29, 95.54, 23.33],
        },
        {
          name: "机电工程关键节点完成率",
          value: [100, 14.29, 87.14, 81.63],
        },
      ],
    },
  };
  let dataArr = [];

  dataObj.data.value.map((item) => {
    let newArr = {
      name: item.name,
      type: "line",
      smooth: true,
      symbolSize: 8,
      data: item.value,
      barWidth: "30%",
      itemStyle: {
        normal: {
          color:
            item.name === "土建工程关键节点完成率"
              ? "#f0c725"
              : item.name === "机电工程关键节点完成率"
              ? "#0BE3FF"
              : "#16f892",
        },
      },
    };
    dataArr.push(newArr);
  });

  for (var i = 0; i < importantPointEchartE.length; i++) {
    let myChart = echarts.init(importantPointEchartE[i]);

    option = {
      color: ["#f0c725", "#16f892"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        x: "center",
        top: "25",
        textStyle: {
          color: "#c1cadf",
          fontSize: 14,
        },
      },
      grid: {
        left: "3%",
        right: "10%",
        top: "25%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        show: true,
        orient: "vertical",
        x: "right",
        y: "center",
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: dataObj.year,
          axisLine: {
            lineStyle: {
              color: "rgba(240,199,37,0.5)",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#c1cadf",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          //name: '(处)',
          nameTextStyle: {
            color: "#c1cadf",
            align: "right",
            lineHeight: 10,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(240,199,37,0.5)",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#c1cadf",
            fontSize: "15",
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: dataArr,
    };

    myChart.setOption(option);
  }
}
